<template>
  <div class="wh-graph-editor-tools" :class="[showLeftSection?'show-left-section':'hide-left-section', showRightSection?'show-right-section':'hide-right-section']">
    <div class="wh-graph-editor-tools-group" v-for="(group, section) in list" :key="section">
      <el-tooltip :content="item.name" placement="bottom" effect="light" v-for="(item, index) in group" :key="index">
        <!-- <img class="wh-graph-editor-tools-group-item" :src="showImg(item)" alt=""> -->
        <el-button type="text" @click="onClickTool(item)" :disabled="item.disabled === 1" :icon="'iconfont icon-'+item.title" size="mini" class="wh-graph-editor-tools-group-item"></el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6';
import '../../assets/font/iconfont.css'
export default {
  data() {
    return {
      list: [
        [{
          title: 'back',
          name: '上一步',
          disabled: 1
        },{
          title: 'next',
          name: '下一步',
          disabled: 1
        }],
        [{
          title: 'copy',
          name: '拷贝',
          disabled: 0
        }, {
          title: 'paste',
          name: '粘贴',
          disabled: 0
        }, {
          title: 'save',
          name: '保存',
          disabled: 0
        }, {
          title: 'export',
          name: '导出',
          disabled: 0
        }, {
          title: 'delete',
          name: '删除',
          disabled: 0
        }],
        [{
          title: 'zoom-out',
          name: '放大',
          disabled: 0
        }, {
          title: 'zoom-in',
          name: '缩小',
          disabled: 0
        }],
        [{
          title: 'minus-the-bottom',
          name: '图层下移',
          disabled: 0
        }, {
          title: 'minus-the-top',
          name: '图层上移',
          disabled: 0
        }],
        [{
          title: 'full-screen',
          name: '全屏',
          disabled: 0
        }]
      ],
      showLeftSection: true,
      showRightSection: true
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
  },
  destroyed() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    showImg(item) {
      return require('../../assets/tools/'+item.title+'.svg')
    },
    handleToggleSection (type) {
      if (type === 1) {
        this.showLeftSection = !this.showLeftSection
      } else if (type === 2) {
        this.showRightSection = !this.showRightSection
      }
    },
    onClickTool (item) {
      this.$emit('on-click', item)
    },
    handleFullscreenChange (e) {
      console.log(!document.fullscreenElement && !document.webkitIsFullScreen);
      if (!document.fullscreenElement && !document.webkitIsFullScreen) {
        this.list[4][0].title = 'full-screen'
        this.list[4][0].name = '全屏'
      } else {
        this.list[4][0].title = 'off-screen'
        this.list[4][0].name = '退出全屏'
      }
    },
  },
}
</script>

<style scoped lang="scss">
.wh-graph-editor-tools {
  position: absolute;
  left: 250px;
  top: 0;
  right: 250px;
  // width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid lightgray;
  // box-shadow: 0 0 5px 5px lightgray;
  padding: 10px 20px;
  box-sizing: border-box;
  z-index: 9;
  background-color: #F5F5F5;
  &-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    &::before {
      width: 1px;
      content: '';
      height: 20px;
      background: lightgray;
      margin: 0 10px;
    }
    &:first-child::before {
      content: none;
    }
    ::v-deep .el-button--text,
    ::v-deep .el-button--text:focus,
    ::v-deep .el-button--text:hover {
      color: #2c2c2c;
    }
    ::v-deep .el-button.is-disabled,
    ::v-deep .el-button.is-disabled:focus,
    ::v-deep .el-button.is-disabled:hover {
      color: #C0C4CC;
    }

    // ::v-deep .el-button--text {
    //   color: #2c2c2c;
    // }
    &-item {


      // color: #2c2c2c;
      // padding: 0;
      // background: transparent;
      // border: none;
      // &-img {
      //   height: 20px;
      //   padding: 0 5px;
      //   box-sizing: border-box;
      //   cursor: pointer;
      // }
    }
  }
}
.show-left-section {
  left: 250px;
  transition: all 800ms ease-in-out;
}
.hide-left-section {
  left: 0px;
  transition: all 800ms ease-in-out;
}
.show-right-section {
  right: 250px;
  transition: all 800ms ease-in-out;
}
.hide-right-section {
  right: 0;
  transition: all 800ms ease-in-out;
}
</style>
